<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改元素</title>
    <style>
      .box1 > .now-time {
        margin-top: 5px;
        cursor: pointer;
      }

      .box2 {
        margin-top: 40px;
      }
      .box2 > .img-box {
        width: 200px;
      }
      .box2 > .btn-box > button {
        cursor: pointer;
      }

      .box3 {
        margin-top: 40px;
      }
      .box3 > .update-value {
        cursor: pointer;
      }

      .box4 {
        display: flex;
        margin-top: 40px;
      }
      .box4 > .box4-1 {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-right: 30px;
        cursor: pointer;
      }
      .box4 > .box4-2 {
        width: 100px;
        height: 100px;
        background-color: #e3cf57;
        cursor: pointer;
      }
      .box4 > .font24 {
        font-size: 24px;
      }
      .change-box4-2 {
        width: 200px;
        background-color: #40e0d0;
      }
    </style>
  </head>
  <body>
    <!-- 1、修改元素内容 -->
    <div class="box1">
      <div class="time-box">某个时间</div>
      <button id="nowTime" class="now-time">获取当前时间</button>
    </div>

    <!-- 2、修改元素属性 -->
    <div class="box2">
      <img src="./imgs/liu.png" title="刘德华" class="img-box" />
      <div class="btn-box">
        <button id="liuBtn">刘德华</button>
        <button id="zhangBtn">张学友</button>
      </div>
    </div>

    <!-- 3、修改表单元素属性 -->
    <div class="box3">
      <input type="text" value="你好啊" class="input-box" />
      <button class="update-value">修改文本框值</button>
    </div>

    <!-- 4、修改元素样式 -->
    <div class="box4">
      <div class="box4-1"></div>
      <div class="box4-2 font24">box4-2</div>
    </div>

    <script>
      // 1、修改元素内容
      var nowTime = document.getElementById('nowTime');
      var timeEle = document.querySelector('.time-box');
      nowTime.onclick = function () {
        timeEle.innerHTML = getNowTime();
      };
      // 获取当前时间
      function getNowTime() {
        var dt = new Date();
        var year = dt.getFullYear();
        var month = dt.getMonth() + 1;
        month = month < 10 ? '0' + month : month;
        var date = dt.getDate();
        date = date < 10 ? '0' + date : date;
        var day = dt.getDay();
        var weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowWeek = weeks[day];
        var hour = dt.getHours();
        hour = hour < 10 ? '0' + hour : hour;
        var min = dt.getMinutes();
        min = min < 10 ? '0' + min : min;
        var sec = dt.getSeconds();
        sec = sec < 10 ? '0' + sec : sec;
        return `${year}-${month}-${date} ${nowWeek} ${hour}:${min}:${sec}`;
      }

      // 2、修改元素属性
      var imgEle = document.querySelector('.img-box');
      var liuBtn = document.querySelector('#liuBtn');
      var zhangBtn = document.querySelector('#zhangBtn');
      liuBtn.onclick = function () {
        imgEle.src = './imgs/liu.png';
        imgEle.title = '刘德华';
      };
      zhangBtn.onclick = function () {
        imgEle.src = './imgs/zhang.png';
        imgEle.title = '张学友';
      };

      // 3、修改表单元素属性
      var inputEle = document.querySelector('.input-box');
      var btnEle = document.querySelector('.update-value');
      btnEle.onclick = function () {
        inputEle.value = 'hello world';
      };

      // 4、修改元素样式
      var box4_1 = document.querySelector('.box4-1');
      var box4_2 = document.querySelector('.box4-2');
      box4_1.onclick = function () {
        this.style.backgroundColor = 'skyblue';
      };
      box4_2.onclick = function () {
        this.className = 'change-box4-2'; // 注意：原有类名会被覆盖掉
      };
    </script>
  </body>
</html>
